<script setup>
	import {
		ref
	} from 'vue'

	const tabStatus = ref("login")
</script>

<template>
	<!-- <scroll-view enable-back-to-top class="viewport" scroll-y> -->
	<view class="background-img">
		<image src="/static/center_bg.png" style="width: 100%;"></image>
	</view>
	<!-- 头像 -->
	<view class="overview">
		<image src="/static/contact/contact.png"></image>
	</view>
	<view class="viewport">
		<view class="contact">
			<view class="contact-row">
				<image src="../../static/contact/phone.png"></image>
				<view class="contact-row-title">13658648740(微信同号)</view>
			</view>
			<view class="divider"></view>
			<view class="contact-row">
				<image src="../../static/contact/mail.png"></image>
				<view class="contact-row-title">xuqilong.good@163.com</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.background-img {
		position: relative;
		z-index: 1;
	}

	.overview {
		// display: flex;
		//#00c6a2
		width: 100%;
		position: absolute;
		z-index: 99;
		top: 80px;
		text-align: center;

		// height: 120rpx;
		// padding: 0 36rpx;
		// color: #fff;
		image {
			width: 250rpx;
			height: 250rpx;
		}
	}

	.viewport {
		width: 100%;
		// height: 200px;
		position: absolute;
		z-index: 99;
		top: 230px;

		.contact {
			padding: 20px;
			box-sizing: border-box;
			margin: 50rpx 30rpx 0;
			background-color: #fff;
			border-radius: 10rpx;
			// display: flex;
			// align-items: center;
			image {
				width: 50px;
				height: 50px;
			}
			.contact-row {
				display: flex;
				flex-direction: row;
				padding-top: 10px;
				.contact-row-title {
					padding-left: 10px;
					font-size: 20px;
					font-weight: 500;
					display: flex;
					// justify-content: center;
					align-items: center;
				}
			}
			.divider {
				height: 1px;
				background-color: rgb(200, 200, 200);
				// margin: 80rpx;
				margin-top: 20px;
				margin-bottom: 10px;
			}
		}
	}
</style>